<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" href="../css/main.css">
		<!-- 引入组件 -->
		<script src="../js/ajax.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript" src="../js/fanhui.js" ></script>
	</head>
	<body>
		<div id="app">
			<header style="background: red; width: 100%;height: 46px;">
				<van-nav-bar left-arrow  style="background-color: red;" color="white"   @click-left="onClickLeft" />
			</header>
			<section>
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="val in carousel">
						<img :src="val.src" onerror="this.src='../img/520.jpg'" style="height: 300px;width: 345px;">
					</van-swipe-item>
				</van-swipe>
				<van-row>
					<van-col span="22" offset="1" style="margin-top: 10px;">
						<h3>{{name}}</h3>
					</van-col>
				</van-row>
				<van-row>
					<van-col span="22" offset="1" style="border-bottom: 1px darkgrey;margin-top: -15px;">
						<h2 style="color: red;">￥{{price}}</h2>
					</van-col>
				</van-row>
				<van-row>
					<van-col span="8" offset="1">
						<span style="color: #7D7E80;">运费：免运费</span>
					</van-col>
					<van-col span="14">
						<span style="color: #7D7E80;">销量:{{salecount}}</span>
					</van-col>
				</van-row>
				<van-row type="flex" justify="space-between">
					<van-col span="6" offset="1">
						<van-icon name="thumb-circle-o" style="margin-top: 15px;font-size:15px">
							<span style="color: red;">正品保证</span>
						</van-icon>
					</van-col>
					<van-col span="6">
						<van-icon name="thumb-circle-o" style="margin-top: 15px;font-size:15px">
							<span style="color: red;">急速退款</span>
						</van-icon>
					</van-col>
					<van-col span="6">
						<van-icon name="thumb-circle-o" style="margin-top: 15px;font-size:15px">
							<span style="color: red;">两天内发货</span>
						</van-icon>
					</van-col>
				</van-row>
				<van-row>
					<div style="background-color: lightgrey; height: 15px;margin-top: 10px;"></div>
				</van-row>
				<van-row>
					<van-col span="6" style="font-size: 15px;margin-top: 10px;">商品详情</van-col>
				</van-row>
				<van-swipe-item v-for="val in carousel">
						<img :src="val.src" onerror="this.src='../img/520.jpg'" style="height: 300px;width: 345px;">
					</van-swipe-item>
			</section>
			<footer>
				<van-row>
					<van-tabbar>
						<van-col span="6">
							<van-goods-action-mini-btn icon="like-o"  text="收藏" v-show="iscollect" @click="onClickMiniBtn" ></van-goods-action-mini-btn>
							<van-goods-action-mini-btn icon="like" style="color: red;" text="已收藏"  v-show="!iscollect" @click="yetcollect" /></van-goods-action-mini-btn>
						</van-col>
						<van-col span="9">
							<van-goods-action-big-btn @click="joinCar" v-if="addShopcartCount==0">加入购物车</van-goods-action-big-btn>
							<van-goods-action-big-btn @click="joinCar" v-else>加入购物车X<span v-text="addShopcartCount"></span></van-goods-action-big-btn>
						</van-col>
						<van-col span="9">
							<van-goods-action-big-btn primary text="立即购买" @click="onClickBigBtn()" />
						</van-col>
					</van-tabbar>
				</van-row>
			</footer>
		</div>
		<script>
			var user = plus.storage.getItem('user');
			user = JSON.parse(user);
			var vm = new Vue({
				el: "#app",
				data: {
					carousel: [],
					name: "", //商品名称
					price: "", //价格
					CoverImage: "",
					salecount: "", //销量
					shopId: "",
					iscollect:true,
					phone: user.UserData.Phone, //用户的电话
					addShopcartCount: 0 //此商品购物车数量
				},
				methods: {
					onClickLeft:function() { //返回上一页
						plus.webview.close(plus.webview.currentWebview());
					},
					onClickMiniBtn: function() { //收藏
						var _this = this;
						if (user == null) {
							this.$toast('你还没登陆呢！');
							return;
						}
						ajax({ //收藏商品
							url: "http://dsapi.ysd3g.com/API/CollectGoods",
							dataType: 'jsonp',
							data: {
								goodsId: _this.shopId,
								key: user.Key
							},
							success: function(res) {
								if (res.Error) {
									_this.$toast(res.Msg);
								} else {
									_this.$toast('收藏成功');
									vm.iscollect=false;
								}
							}
						});
					},
					yetcollect() //取消收藏
					{
						var _this = this;
						if (user == null) {
							this.$toast('你还没登陆呢！');
							return;
						}
						ajax({
							url: "http://dsapi.ysd3g.com/api/cancelCollectGoods",
							dataType: "jsonp",
							data: {
								key: user.Key,
								goodsId: vm.shopId
							},
							success(res) {
								if(!res.Error) {
									vm.$toast.success("已取消收藏");
									vm.iscollect = true;
								} else {
									vm.$toast.fail(res.Msg);
								}
							}
						});
					},
					onClickBigBtn: function() { //立即购买
						if (user == null) {
							this.$toast('你还没登陆呢！');
							return;
						}
						var fast = plus.webview.create("pay.html", "id", {}, {
							shopId: this.shopId,
							viewtype:true//详情类型类
						});
						fast.show();
					},
					joinCar: function() { //添加购物车
						if (user == null) { //判断用户登陆
							this.$toast('你还没登陆呢！');
							return;
						}
						vm.$toast.success("加入购物车");
						var goodsArr = [{ //购物车里边没有东西的时候要用的数据
							goodsId: vm.shopId,
							buyCount: 1
						}];
						var goodsObj = { //购物车里边有东西的时候要用的数据
							goodsId: vm.shopId,
							buyCount: 1
						};
						var newArr = [];
						var shopping = plus.webview.getWebviewById("shopping"); //刷新页面
						if (plus.storage.getItem(vm.phone) == null) { //如果购物车里面没有任何东西
							plus.storage.removeItem(vm.phone);
							plus.storage.setItem(vm.phone, JSON.stringify(goodsArr));
							vm.addShopcartCount = 1; //显示此商品在购物车内的数量
							shopping.reload();
						} else { //购物车里有东西
							newArr = JSON.parse(plus.storage.getItem(vm.phone)); //购物车里面的商品
							for (var i = 0; i < newArr.length; i++) { //遍历购物车
								if (newArr[i].goodsId == vm.shopId) { //如果购物车里面有此商品
									newArr[i].buyCount += 1; //商品数量+1
									plus.storage.removeItem(vm.phone); 
									plus.storage.setItem(vm.phone, JSON.stringify(newArr)); //
									vm.addShopcartCount = newArr[i].buyCount; //显示此商品在购物车内的数量
									shopping.reload();
									return;
								}
							}
							//购物车里没有此商品
							newArr.push(goodsObj); //向购物车内添加商品
							plus.storage.setItem(vm.phone, JSON.stringify(newArr)); //
							vm.addShopcartCount = 1; //显示此商品在购物车内的数量
							shopping.reload();
						}
					}
				},
				created: function() {
					_this = this;
					var del = plus.webview.currentWebview();
					_this.shopId = del.shopId;
					ajax({ //商品详情信息
						url: "http://dsapi.ysd3g.com/API/GoodsDetail",
						dataType: "jsonp",
						data: {
							gId: _this.shopId
						},
						success: function(res) {
							var data = res.Detail;
							_this.carousel = data.SwipeImages;
							console.log(res);
							_this.name = data.Name;
							_this.price = data.RealPrice; //价格
							console.log(_this.price)
							_this.salecount = data.SaleCount; //销量
							_this.Details = data.Details;
						}
					});
				}
			});
		</script>
	</body>
</html>
